<template>
  <baidu-map
    id="allmap"
    :scroll-wheel-zoom="true"
    :center="currentProvince"
    :zoom="zoom"
    :ak="baiduAk"
    @ready="getLocationPoint"
    @click="searchcomplete"
  >
    <bm-view class="map" />
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :show-address-bar="true" :auto-location="true" />
    <bm-local-search :keyword="address" :select-first-result="true" :location="currentProvince" :auto-viewport="true" style="display: none" />
  </baidu-map>
</template>

<script>
// 地图
import { BaiduMap, BmGeolocation, BmView, BmLocalSearch } from 'vue-baidu-map'
import { mapState } from 'vuex'
export default {
  name: 'Vue',
  components: {
    BaiduMap,
    BmView,
    BmLocalSearch,
    BmGeolocation
  },
  props: {
    address: {
      type: String,
      default: ''
    },
    currentProvince: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      zoom: 15,
      selectAddress: '',
      y: '',
      x: ''
    }
  },
  computed: {
    ...mapState({
      baiduAk: state => state.basicInfo.baiduAk // 百度key
    })
  },
  methods: {
    getLocationPoint({ BMap, map }, e) {
      /* 创建地址解析器的实例 */
      const geoCoder = new BMap.Geocoder()
      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.address, (point) => {
        this.y = point.lat
        this.x = point.lng
      })
    },
    // 获取标注点
    searchcomplete(e) {
      const geoCoder = new BMap.Geocoder()
      geoCoder.getLocation(e.point, (res) => {
        this.selectAddress = res.address
        this.y = res.point.lat
        this.x = res.point.lng
        this.$emit('BMapGetLocation', this.selectAddress, this.y, this.x)
      })
    }
  }
}
</script>

<style scoped lang="scss">
  #allmap {
    height: 35vh;
    width: 100%;
    overflow-y: scroll;
    .map {
      width: 100%;
      height:35vh;
      flex: 1
    }
  }

</style>
